import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/widgets/bottom_sheet/country_codes_bottom_sheet.dart';
import 'package:finance_app/src/widgets/form/form_edit_status_inherited_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';

class PhoneNumberInputForm extends StatefulWidget {
  final FocusNode focusNode;
  final TextEditingController controller;
  final bool hasError;
  final String defaultCountryCode;
  final ValueChanged countryCodeCallback;
  final Border border;

  const PhoneNumberInputForm({
    Key key,
    this.focusNode,
    this.hasError,
    this.countryCodeCallback,
    this.defaultCountryCode = "+65",
    this.controller,
    this.border =
        const Border(bottom: BorderSide(color: aceGrayColor, width: 0.5)),
  }) : super(key: key);

  @override
  _PhoneNumberInputFormState createState() => _PhoneNumberInputFormState();
}

class _PhoneNumberInputFormState extends State<PhoneNumberInputForm> {
  String currentSelectCode;

  @override
  void initState() {
    super.initState();
    currentSelectCode = widget.defaultCountryCode;
  }

  void _onShowCountryCode() async {
    FocusScope.of(context).requestFocus(FocusNode());
    currentSelectCode =
        await showCountryCodesBottomSheet(context, currentSelectCode);
    setState(() {});
    widget.countryCodeCallback?.call(currentSelectCode);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        height: getDp(62),
        padding: EdgeInsets.symmetric(
          horizontal: getDp(35),
        ),
        decoration: BoxDecoration(color: Colors.white, border: widget.border),
        child: Row(
          children: [
            PressedOpacityButton(
              onPressed: FormEditStatusInheritedWidget.ofEnable(context)
                  ? _onShowCountryCode
                  : () {},
              child: Row(
                children: [
                  Text(
                    '$currentSelectCode',
                    style: TextStyle(
                      color: FormEditStatusInheritedWidget.ofEnable(context)
                          ? aceBlueColor
                          : aceBlackColor,
                      fontSize: getSp(16),
                      fontWeight: FontWeight.w700,
                      height: 1,
                    ),
                  ),
                  SizedBox(
                    width: 4,
                  ),
                  if (FormEditStatusInheritedWidget.ofEnable(context))
                    SvgPicture.asset(
                      A.assetsImagesStyleArrowBlack,
                      color: aceBlueColor,
                      width: getDp(7),
                      height: getDp(7),
                      fit: BoxFit.contain,
                    ),
                ],
              ),
            ),
            SizedBox(
              width: getDp(15),
            ),
            Container(
              height: getDp(31),
              width: getDp(0.25),
              color: aceGrayColor,
            ),
            SizedBox(
              width: getDp(15),
            ),
            Expanded(
                child: TextField(
              inputFormatters: [
                LengthLimitingTextInputFormatter(11),
              ],
              controller: widget.controller,
              focusNode: widget.focusNode,
              scrollPadding: EdgeInsets.zero,
              obscureText: false,
              keyboardType: TextInputType.phone,
              style: TextStyle(
                fontSize: getSp(16),
                color: FormEditStatusInheritedWidget.ofEnable(context)
                    ? aceBlueColor
                    : aceBlackColor,
                fontWeight: FontWeight.bold,
              ),
              enabled: FormEditStatusInheritedWidget.ofEnable(context),
              decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  hintText: S.current.mobile_number,
                  hintStyle: TextStyle(
                      color:
                          widget.hasError == true ? aceRedColor : aceGrayColor,
                      fontWeight: FontWeight.w700,
                      fontSize: getSp(16),
                      height: 16 / 16)),
            )),
          ],
        ));
  }
}
